<template>
	<view class="root">
		<login-dialog ref="login" @afterLogin="afterLogin"></login-dialog>
		<view v-if="isLogin" class="main-container">
			<view class="title-container">
				<image :src="avatar" mode="aspectFill" class="title-avatar"></image>
				<view class="title-top">
					<text class="title-nick">{{nickName}}-[{{uTypes[type]}}]</text>
					<image :src="level" mode="aspectFill" class="title-level"></image>
					<text class="title-icon iconfont icon-kaiguan" @click="logout"></text>
				</view>

				<text class="title-email">{{email}}</text>

			</view>
			<view @click="clickSwitch(0)" class="column-container">我发布的{{myCount}}文章 <text
					:class="status[0].visible?'icon iconfont icon-xiangshang1':'icon iconfont icon-xiangxia1'"></text>
			</view>
			<scroll-view v-if="status[0].visible" scroll-x class="myblog-container" @scrolltolower="getMyBlogs">
				<view v-for="(blog,index) in myBlogs" :key="'m_'+blog.id" class="myblog-item"
					@click="clickGoToDetail(blog.id)">
					<image :src="blog.picture" mode="aspectFill"></image>
					<text>{{blog.title}}</text>
				</view>
			</scroll-view>
			<view @click="clickSwitch(1)" class="column-container">管理{{myCategories.length}}个类别 <text
					:class="status[1].visible?'icon iconfont icon-xiangshang1':'icon iconfont icon-xiangxia1'"></text>
				<view v-if="status[1].visible" class="category-container">
					<view v-for="(c,index) in myCategories" :key="c.id" class="category-item">
						<text class="category-item-left" @click.stop="clickUpdateCategory(c.id,c.name)">{{c.name}}</text>
						<text :class="c.count==0?'category-item-right-none':'category-item-right'"  @click.stop="c.count==0?clickDelete(c.id,c.name,'category'):''">{{c.count==0?'X':c.count}}</text>
						
					</view>
					<view class="category-item" @click.stop="clickAdd(0)">
						<text class="iconfont icon-roundadd"></text>
					</view>
				</view>
				
			</view>
			<view @click="clickSwitch(2)" class="column-container">我点赞的{{myGoodBlogs.length}}篇文章 <text
					:class="status[2].visible?'icon iconfont icon-xiangshang1':'icon iconfont icon-xiangxia1'"></text>
			</view>
			<scroll-view v-if="status[2].visible" scroll-x class="myblog-container">
				<view v-for="(blog,index) in myGoodBlogs" :key="'g_'+blog.id" class="myblog-item" @click="clickGoToDetail(blog.id)">
					<image :src="blog.picture" mode="aspectFill"></image>
					<text>{{blog.title}}</text>
				</view>
			</scroll-view>
			<view @click="clickSwitch(3)" class="column-container">管理{{myTags.length}}个标签 <text
					:class="status[3].visible?'icon iconfont icon-xiangshang1':'icon iconfont icon-xiangxia1'"></text>
				<view v-if="status[3].visible" class="category-container">
					<view v-for="(t,index) in myTags" :key="t.id" class="category-item">
						<text class="category-item-left" @click.stop="clickUpdateCategory(t.id,t.name)">{{t.name}}</text>
						<text :class="t.count==0?'category-item-right-none':'category-item-right'" @click.stop="t.count==0?clickDelete(t.id,t.name,'tag'):''">{{t.count==0?'X':t.count}}</text>
					</view>
					
					<view class="category-item" @click.stop="clickAdd(1)">
						<text class="iconfont icon-roundadd"></text>
					</view>
				</view>
				
			</view>
			
			<dialog-shell ref="add_shell" :title="which?'添加类别数据':'添加分类数据'" @confirm="confirmAdd">
				<view style="margin: 10rpx;">
					<input type="text" placeholder="请输入内容" focus style="padding: 10rpx;" @input="inputGetValue">
				</view>
			</dialog-shell>
			<dialog-shell ref="update_shell" title="修改类别名称" @confirm="confirmUpdate">
				<view style="margin: 10rpx;">
					<input type="text" placeholder="请输入内容" :value="oldName" focus style="padding: 10rpx;" @input="inputGetValue">
				</view>
			</dialog-shell>
			
			<view class="column-container">管理十二个类别 <text class="icon iconfont icon-xiangxia1"></text></view>
			<view class="column-container">管理十二个类别 <text class="icon iconfont icon-xiangxia1"></text></view>
			<view class="column-container">管理十二个类别 <text class="icon iconfont icon-xiangxia1"></text></view>
			<view class="column-container">管理十二个类别 <text class="icon iconfont icon-xiangxia1"></text></view>
			<view class="column-container">管理十二个类别 <text class="icon iconfont icon-xiangxia1"></text></view>


		</view>

	</view>
</template>

<script>
	let app = getApp();
	let page = 0;
	let newName = "";
	let updateId = "";
	export default {
		data() {
			return {
				isLogin: false,
				avatar: "../../static/logo.png",
				nickName: "",
				email: "",
				level: "",
				type: "",
				which:-1,
				uTypes: ["管理员", "认证博主", "普通会员"],
				status: [
					{"visible": false},
					{"visible": false},
					{"visible": false},
					{"visible": false},
				],
				myBlogs: [],
				myCount: -1,
				myCategories: [],
				myGoodBlogs: [],
				myTags:[],
				oldName:"",
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_login_status, this.afterLogin, this);

			if (app.globalData.token == 0)
				this.isLogin = false;
			else
				this.isLogin = true;

		},
		onShow() {
			this.myGoodBlogs = uni.getStorageSync(this.$params.key_good_ids);
			if (!this.isLogin) {
				return;
			}
			this.afterLogin()
			// this.loadData();
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this);
		},
		mounted() {
			// console.log(this.isLogin);
			if (!this.isLogin)
				this.$refs.login.show();
			let test = {
				"visible": false
			}
			this.status.push(test);
		},
		methods: {
			afterALogin() {

			},
			afterLogin() {
				// if(this.isLogin)
				// 	return;
				if (!this.isLogin) this.$refs.login.hidden();
				this.isLogin = true;
				// this.afterLogin();

				this.isLogin = true;
				this.avatar = this.$params.host + app.globalData.avatar;
				this.nickName = app.globalData.nickName;
				this.email = app.globalData.email;
				this.type = app.globalData.type;
				this.level = "../../static/icon/badge" + app.globalData.type + ".png";
				this.loadData();
			},
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '是否退出登录',
					showCancel: true,
					cancelText: '取消',
					confirmText: '退出',
					success: res => {
						if (res.confirm) {
							let data = {
								token: app.globalData.token
							}
							this.$request.postParam(this.$params.host + this.$params.user_logout, data,
							res => {
								if (res.success) {
									this.$refs.login.show();
									app.globalData = {};
									this.isLogin = false;
									this.avatar = '../../static/icon/default_user.png';
									this.nickName = '';
									this.email = '';
									this.type = '';
									this.level = '';
								}
								console.log(res);
							}, () => {});

						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			clickSwitch(index) {
				// console.log(this.status[index]);
				this.status[index].visible = !this.status[index].visible;
			},
			loadData() {
				this.myBlogs = [];
				this.myCount = -1;
				page = 0;
				this.getMyBlogs();
				this.getMyCategories();
				this.getMyTags();
			},
			getMyBlogs() {
				if (this.myBlogs.length == this.myCount && this.myCount >= 0) {
					return;
				}
				let header = {
					"content-type": this.$params.content_type,
					"page": page++,
					"size": 2
				}
				let url = this.$params.host + this.$params.action_blogs_get_blogs + app.globalData.uid;
				this.$request.getWithHeader(url, header, res => {
					// console.log(res);
					res.data.forEach(blog => {
						if (!blog.picture.startsWith('http')) {
							blog.picture = this.$params.host + blog.picture;
						}
					})
					this.myBlogs = this.myBlogs.concat(res.data);
					this.myCount = parseInt(res.message)
					this.status.visible = this.myCount > 0;
				}, () => {})
			},
			getMyCategories() {
				this.myCategories = [];
				this.$request.get(this.$params.host + this.$params.action_category_get, res => {
					let url = this.$params.host + this.$params.action_blogs_get_tags_count;
					res.data.forEach(async (c) => {
						let r = await this.$request.requestAsync(url + c.id)
						if (r.data.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data.data
							}
							this.myCategories.push(category);
						}
					})
				}, () => {});

			},
			getMyTags(){
				this.myTags = [];
				let url = this.$params.host + this.$params.action_tag_get
				this.$request.get(url,res => {
					
					res.data.forEach(async (t) => {
						let r = await this.$request.requestAsync(url + t.id + "/blogs")
						let tag = {
							id: t.id,
							name: t.name,
							count: r.data.data.length
						}
						this.myTags.push(tag);
					})
					
				},() => {})
			},
			clickGoToDetail(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			confirmAdd(){
				if(newName.trim(" ").length == 0){
					uni.showToast({
						title: '未输入内容',
						icon:'error'
					});
					
					return;
				}
				
				//检查标签
				let data = {
					"token":app.globalData.token,
					"name":newName
				}
				this.$request.requestAsync(this.$params.host+this.$params.action_category_add,data,'POST')
					.then(res =>{
						if(!res.data.success){
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}else{
							let category = {
								id:res.data.data.id,
								name:res.data.data.name,
								count:0
							}
							this.myCategories.push(category);
						}
						newName = ""
					})
					.catch(err =>{
						console.log(err);
					})
				
			},
			inputGetValue(e){
				newName = e.detail.value;
			},
			clickAdd(n){
				if(n)
					this.which = false;
				else
					this.which = true;
				this.$refs.add_shell.show();
			},
			clickUpdateCategory(id,name){
				this.oldName = name;
				updateId = id;
				newName = name;
				this.$refs.update_shell.show();
			},
			confirmUpdate(){
				if(newName.trim(" ").length == 0){
					uni.showToast({
						title: '未输入内容',
						icon:'error'
					});
					return;
				}
				let url = this.$params.host + this.$params.action_category_put + updateId;
				let data = {
					"token":app.globalData.token,
					"name":newName
				}
				this.$request.requestAsync(url,data,'PUT')
					.then(res =>{
						if(!res.data.success){
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}else{
							this.myCategories.forEach(c => {
								if(c.id == res.data.data.id){
									c.name = res.data.data.name;
								}
							})
						}
						newName = ""
					})
					.catch(err =>{
						console.log(err);
					})
				
			},
			clickDelete(id,name,type){
				uni.showModal({
					title: '删除'+type,
					content: '确认删除'+name+"吗？",
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if(res.confirm){
							let url = "";
							let data = {
								"token":app.globalData.token
							}
							if(type=='tag'){
								url = this.$params.host + this.$params.action_tag_delete + id
							}else{
								url = this.$params.host + this.$params.action_category_delete + id
							}
							this.$request.deleteRequire(url,data,res=>{
								console.log(res);
							},()=>{
								console.log("sss");
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
				
				
				// console.log(name);
			}



		}
	}
</script>

<style>
	@import url('character.css');
</style>
